import React, {useEffect, useRef, useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import * as echarts from "echarts";

export interface BarData {
  category: string; // 分类名称，如"供配电"、"给排水"
  normal: number;   // 正常数值
  alert: number;    // 告警数值
}

export interface DualBarChartProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;

  // 数据
  data?: BarData[];
  maxValue?: number; // 最大值，用于计算柱子高度

  // 柱子样式
  barWidth?: number;
  barGap?: number; // 双柱之间的间距
  groupGap?: number; // 组之间的间距
  normalBarColor?: string;
  normalBarGradientEnd?: string;
  alertBarColor?: string;
  alertBarGradientEnd?: string;

  // 背景柱子样式
  backgroundBarColor?: string;
  backgroundBarGradientEnd?: string;

  // 数值标签样式
  showValueLabels?: boolean;
  valueLabelFontSize?: number;
  valueLabelColor?: string;
  valueLabelFontFamily?: string;
  valueLabelFontWeight?: number;

  // 分类名称样式
  showCategoryLabels?: boolean;
  categoryLabelFontSize?: number;
  categoryLabelColor?: string;
  categoryLabelFontFamily?: string;
  categoryLabelFontWeight?: number;

  // 图例样式
  showLegend?: boolean;
  legendFontSize?: number;
  legendColor?: string;
  legendFontFamily?: string;
  legendFontWeight?: number;
  legendGap?: number;

  // 事件
  onBarClick?: (data: BarData, type: 'normal' | 'alert') => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const DualBarChart = forwardRef<HTMLDivElement, DualBarChartProps>((props, ref) => {
  const {
    // 容器样式
    width = 386,
    height = 219,
    backgroundColor = '#4D5966',
    borderRadius = 0,

    // 数据
    data = [
      { category: '供配电', normal: 48, alert: 8 },
      { category: '给排水', normal: 20, alert: 1 },
      { category: '暖通', normal: 35, alert: 3 },
      { category: '消防', normal: 28, alert: 5 }
    ],
    maxValue = 60,

    // 柱子样式
    barWidth = 10,
    barGap = 20,
    groupGap = 30,
    normalBarColor = '#1EE7E7',
    normalBarGradientEnd = 'rgba(30,231,231,0.35)',
    alertBarColor = '#FF4242',
    alertBarGradientEnd = 'rgba(255,92,0,0.35)',

    // 背景柱子样式
    backgroundBarColor = 'rgba(191,234,255,0)',
    backgroundBarGradientEnd = 'rgba(191,234,255,0.2)',

    // 数值标签样式
    showValueLabels = true,
    valueLabelFontSize = 12,
    valueLabelColor = '#FFFFFF',
    valueLabelFontFamily = 'SourceHanSansSC',
    valueLabelFontWeight = 400,

    // 分类名称样式
    showCategoryLabels = true,
    categoryLabelFontSize = 14,
    categoryLabelColor = '#E6F7FF',
    categoryLabelFontFamily = 'PingFangSC',
    categoryLabelFontWeight = 400,

    // 图例样式
    showLegend = true,
    legendFontSize = 12,
    legendColor = '#FFFFFF',
    legendFontFamily = 'SourceHanSansSC',
    legendFontWeight = 400,
    legendGap = 20,

    // 事件
    onBarClick,

    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `20vw` : width,
    height: typeof height === 'number' ? `21vh` : height,
    minHeight: '227px',
    maxHeight: '263px',
    minWidth: '390px',
    maxWidth: '600px',

    ...style
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const chartRef = useRef<HTMLDivElement>(null);
  const myChartData = {
    vehicleFlow: [120, 132, 101, 134, 90, 230],
    passengerFlow: [220, 182, 191, 234, 290, 330],
  }
  useEffect(() => {
    if (chartRef.current && myChartData) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        grid: {
          left: '6%',
          right: '6%',
          top: '25%',
          bottom: '12%',
        },
        legend: {
          top: '5%', // 顶部位置
          right: '6%', // 右侧位置
          icon: 'roundRect',
          itemHeight: 4,
          itemWidth: 4,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          nameTextStyle: {
            fontSize: 10,
          },
          data: ['供配电', '给排水', '消防', '暖通'],

        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          // 0,2,4为样式数据，data值全为真实数据的最大值
          {
            data: [200, 200, 200, 200,],
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(191, 234, 255, 0)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.2)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.6)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.6)' },
              ])
            },
          },
          {
            name: '正常',
            data: [120, 200, 150, 80],
            barWidth: 6,
            barGap: '-1%',
            type: 'bar',
            showBackground: true,
            label: {
              show: true,
              fontSize: 10,
              distance: -20,
              position: 'insideTop',
              formatter: '{c}',
              color: 'rgba(255,255,255,0.8)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 231, 231, 1)' },
                { offset: 1, color: 'rgba(30, 231, 231, 0.4)' },
              ]),
              borderRadius: [4, 4, 0, 0],
            },
            backgroundStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(191, 234, 255, 0)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.2)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.6)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.6)' },
              ]),
            },
          },
          {
            data: [200, 200, 200, 200],
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(191, 234, 255, 0)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.2)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.6)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.6)' },
              ]),
            },
          },
          {
            name: '异常',
            data: [120, 200, 150, 80],
            barWidth: 6,
            type: 'bar',
            showBackground: true,
            label: {
              show: true,
              fontSize: 10,
              distance: -20,
              position: 'insideTop',
              formatter: '{c}',
              color: 'rgba(255,255,255,0.8)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 66, 66, 1)' },
                { offset: 1, color: 'rgba(255, 92, 0, 0.4)' },
              ]),
              borderRadius: [4, 4, 0, 0],
            },
            backgroundStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(191, 234, 255, 0)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.2)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.6)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.6)' },
              ], false),
            },
          },
          {
            data: [200, 200, 200, 200],
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(191, 234, 255, 0)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.2)' },
                { offset: 0.99, color: 'rgba(191, 234, 255, 0.6)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.6)' },
              ]),
            },

          },
        ]
      };
      chartInstance.setOption(option);
      window.addEventListener('resize', () => chartInstance.resize());
      return () => {
        chartInstance.dispose();
      };
    }
  }, [myChartData]);

  const handleBarClick = (item: BarData, type: 'normal' | 'alert') => {
    if (onBarClick) {
      onBarClick(item, type);
    }
  };

  const dualBarChartClassName = ['dual-bar-chart', className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={dualBarChartClassName}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="chart-area">
        <div className="chart-container" ref={chartRef} style={{ width: '100%', height: '100%' }}>
        </div>
      </div>
    </div>
  );
});

DualBarChart.displayName = 'DualBarChart';

export default DualBarChart;
